<template>
	<view class="search">
		<bangs></bangs>
		<!-- 自定义导航栏 -->
		<view class="d-flex a-center" style="height: 90rpx;">
			<span class="iconfont icon-2fanhui ml-2" @click="oldreute"></span>
			<input type="text" v-model="keyword" class="flex-1 bg-light rounded ml-2 px-2" style="height: 65rpx;" placeholder="车厘子">
			<view class="d-flex a-center j-center" style="width: 85rpx;" @click="search">搜索</view>
		</view>
		
		<!-- 热门搜索 -->
		<card headTitle="热门搜索">
			<!-- 多色按钮 -->
			<block v-for="(item,index) in hot" :key="index">
				<view @click="quickSearch(item.name)" class="d-inline-block">
					<color-tag  :items="item" ></color-tag>
				</view>
			</block>
		</card>
		
		
		<!-- 常见分类 -->
		<card headTitle="常见分类">
			<block v-for="(item,index) in cate" :key="index">
				<color-tag :items="item" :color="false"></color-tag>
			</block>
		</card>
	</view>
</template>

<script>
	import card from "@/components/common/card.vue"
	import colorTag from "@/components/search/color-tag.vue"
	export default {
		data() {
			return {
				keyword:'',
				hot:[
					{ name:'车厘子' },
					{ name:'雪碧' },
					{ name:'牛奶' },
					{ name:'可乐' },
					{ name:'薯片' },
				],
				cate:[
					{ name:'坚果炒货' },
					{ name:'咖啡茶饮' },
					{ name:'奶油奶酪' },
					{ name:'时令水果' },
					{ name:'洋酒' },
					{ name:'热带水果' },
					{ name:'碳酸饮料' },
					{ name:'进口护理' },
				],
			}
		},
		components:{
			card,
			colorTag
		},
		methods: {
			quickSearch(name){
				this.keyword = name
				this.search()
			},
			search(){
				if(this.keyword ===''){
					return uni.showToast({
						title:"搜索栏不能为空",
						icon: 'none'
					})
				}
				
				uni.navigateTo({
					url:'../search-list/search-list?keyword='+this.keyword
				})
			},
			oldreute(){
				// 退回到上一页
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>

</style>
